<template>
  <Page name="额度申请">
    <!-- <div slot="title"></div> -->
    <div class="tabs">
      <div class="tabs-wrap">
        <ul>
          <li v-for="(item,index) in tabs" :class=" index == idx ? 'on' : ''" @click="change(item,index)">{{item.text}}</li>
        </ul>
      </div>
    </div>
    <p class="apply-btn">
      <nuxt-link to="/amount/amount_apply">额度申请</nuxt-link>
    </p>
    <div class="h88"></div>
    <ui-loading v-if="initLoading" class="page-init-loading">
      <div slot="content"></div>
    </ui-loading>
    <ScrollList :config="config" @bottom="getPage"  @pull="pull">
      <div class="amount">
        <ul>
          <li v-for="item in list">
            <h4>
              <span>{{item.addtime | dateFormat}}</span>
              <span>{{item.apply_amount}}{{item.currency_code}}</span>
            </h4>
            <p>
              
              <span :class="item.status==-1?'red':(item.status==0?'yellow':'')">
                <span v-if="item.status==0">提交申请</span>
                <span v-else-if="item.status==-1">已驳回</span>
                <span v-else-if="item.status==-2">取消申请</span>
                <span v-else="item.status==1">已同意</span>
              </span>
            </p>
            <div class="button-group" v-if="item.status==0">
              <button class="agree"  @click="getPop(item.bill_id)">取消申请</button>
            </div>
          </li>
        </ul>
        <ui-empty :empty="empty" v-if="list.length==0"></ui-empty>
        <ui-popup :status="popup.status" @close="popupClose">
          <div class="popup-common exit-pop">
              <div class="exit-content">
                  <p> {{ popInfo.title }} </p>
              </div>
              <div class="footer">
                  <a href="javascript:;" @click="popupClose">取消</a>
                  <a href="javascript:;" @click="confirm()">确定</a>
              </div>
          </div>
        </ui-popup>
      </div>
    </ScrollList>
  </Page>
</template>

<script>
  import Page from '~/components/page';
  import ScrollList from '~/components/ScrollList';
  import UILoading from "~/components/loading";
  import UiEmpty from "~/components/empty";
  import popup from "~/components/common/popup";
  
  export default {
    components: {
      Page,
      ScrollList,
      [UILoading.name]: UILoading,
      UiEmpty,
      [popup.name]: popup,
    },
    data() {
      return {
        initLoading: true,
        idx: 0,
        config: {
          bottom: false,
          pull: false,
          end: false,
        },
        page: 1,
        total: 1,
        loading: false,
        list: [],
        empty: {
          text: "暂无数据"
        },
        managers: [],
        tabs: [
          {
            text: "全部",
            id: 99
          },
          {
            text: "待审核",
            id: 0
          },
          {
            text: "已取消",
            id: -2
          },
          {
            text: "已驳回",
            id: -1
          },
          {
            text: "已完成",
            id: 1
          },
        ],
        popType: '',
        popInfo: {
            title: "",
            content: ""
        },

        popup: {
            status: false
        },
        cancelId:"",
        tab:"",
      }
    },
    mounted() {
      (async () => {
        await this.getPage(99, 0);
      })();
    },
    filters:{
      dateFormat(str){
        let time = Number(str);
        if (time) {
          time = str.length >= 13 ? time : time * 1000;
          let date = new Date(time);
          let year, month, day, hour, min, sec;
          year = date.getFullYear();
          month = date.getMonth() + 1;
          day = date.getDate();
          hour = date.getHours();
          min = date.getMinutes();
          sec = date.getSeconds();
          return (
            "" + year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + sec
          );
        }
      }
    },
    methods: {
      getPop (id) {
        this.popInfo.title = "确定取消额度申请？";
        this.popup.status = true;
        this.cancelId = id;
      },
      popupClose () {
        this.popup.status = false;
      },
      confirm () {
        this.popup.status = false;
        this.cancelApply();
      },
      async cancelApply(){
        let { data:rs } = await this.$axios.post('?ct=api&ac=cancel_apply',{
          bill_id:this.cancelId,
        })
        if(rs.code == 0){
          this.$toast("取消申请成功");
          window.location.reload();
        }else{
          this.$toast(rs.msg);
        }
      },
      change(item, i) {
        this.idx = i;
        this.loading = false;
        this.page = 1;
        this.config.end = false;
        this.list = [];
        this.initLoading = true;
        this.tab = item.id;
        (async () => {
          await this.getPage(item.id);
        })();
      },
      async pull(cb){
        this.$nuxt.$loading.start();
        this.page = 1;
        this.config.end = false;
        await this.getPage(this.tab ,true);
        this.$nuxt.$loading.finish();
        cb();
      },
      async getPage(status,isRefresh) {
        if (this.loading || this.config.end) return false;
        this.loading = true;
        let params = {
          page: this.page,
          status: status
        }
        try {
          let { data: rs } = await this.$axios.post('?ct=api&ac=apply_list', params)
          if (rs.code == 0) {
            this.initLoading = false;
            const { data } = rs;
            this.total = Number(data.total);
            if(isRefresh){
              this.list= data.list;
            }else{
              this.list = this.list.concat(data.list);
            }
            
            if (this.total > this.list.length) {
              this.page++;
            } else {
              this.config.end = true;
            }
          } else {
            this.initLoading = false;
            this.$toast(rs.msg);
          }
        } catch (e) {
          this.$error(e);
        }

        this.loading = false;
      },
    },

  }
</script>

<style lang="less" scoped>
  .apply-btn{
    position: fixed;
    top:30px;
    right:30px;
    z-index: 99999;
    a{
      font-size:30px;
      color:#2086f9;
    }
    
  }
  .tabs {
    position: fixed;
    top: 88px;
    left: 0;
    line-height: 88px;
    background: #fff;
    width: 100%;
    ul {
      li {
        width: 20%;
        float: left;
        text-align: center;
        font-size: 30px;

      }

      li.on {
        position: relative;
        color: #2086f9;

        &:after {
          content: "";
          width: 32px;
          height: 4px;
          background: #2086f9;
          position: absolute;
          bottom: 4px;
          left: 50%;
          margin-left: -16px;
        }
      }
    }
  }

  .amount {
    ul {
      padding: 0 30px;

      li {
        border-radius: 8px;
        border: 1px solid #ededed;
        background: #fff;
        padding: 20px 30px 0;
        margin-top: 20px;
        h4 {
          font-size: 30px;
          color: #292929;
          font-weight: normal;
          span:first-child{
            color:#999;
          }
          span:last-child {
            float: right;
          }
        }
        p {
          margin-bottom: 20px;
          font-size: 24px;
          color: #999;
          font-weight: normal;
          padding-top: 20px;
          text-align: right;
          span.red {
            color: #ee4c25;
          }

          span.yellow {
            color: #d98900;
          }
        }

        .button-group {
          text-align: right;
          border-top: 1px solid #ededed;
          padding-top: 20px;

          button {
            font-size: 28px;
            width: 150px;
            line-height: 60px;
            border: 2px solid #c0c3cc;
            color: #666;
            background: #fff;
            border-radius: 60px;
            margin-bottom: 20px;
          }

          button:last-child {
            border: 2px solid #2086f9;
            color: #2086f9;
          }
        }
      }
    }
  }

  .h88 {
    height: 88px;
  }
  .popup-common {
      position: absolute;
      left: 11%;
      background: #fff;
      z-index: 999;
      border-radius: 10px;
  }

  .exit-pop {
      top: 40%;
      width: 600px;
      height: 280px;
      .exit-content {
          margin-top: 60px;
          text-align: center;
          p {
              margin-top: 40px;
              font-size: 36px;
              color: #282828;
          }
      }
      .footer {
          position: absolute;
          bottom: 0;
          width: 100%;
          display: flex;
          a {
              display: inline-block;
              width: 50%;
              padding: 30px 0;
              text-align: center;
              font-size: 36px;
              border-top: 1px solid #e2e2e2;
              color: #2086f9;
              &:first-child {
                  border-right: 1px solid #e2e2e2;
              }
          }
      }
  }
</style>